import './Scss/SupervisionProcesses.scss'
import { useState, useEffect, useRef } from 'react'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { Column } from '@ant-design/plots'
import { Http } from '../../../../Common/Api'
import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'

export const SupervisionProcesses001 = () => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()
    const [data, setData] = useState([])
    const [Charts, setCharts] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '数量', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setCharts(config)
        }
    }, [size, data])

    const { run: getConstructionSuperviseTypeStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ superviseTypeName, okNum, notOkNum, superviseTypeUuid }) => {
                data = [
                    ...data,
                    { name: '合格', type: superviseTypeName, value: okNum, superviseTypeUuid },
                    { name: '不合格', type: superviseTypeName, value: notOkNum, superviseTypeUuid },
                ]
            })
            setData(data)
        },
    })
    useEffect(() => {
        getConstructionSuperviseTypeStat({ url: `getConstructionSuperviseTypeStat` })
    }, [getConstructionSuperviseTypeStat])
    return (
        <div className="SupervisionProcesses001">
            <div className="TitleSmall">
                <div>按类型统计</div>
                <div />
            </div>
            <div className="Charts" ref={ChartsBox}>
                {Charts && (
                    <Column
                        {...Charts}
                        onReady={plot =>
                            plot.on('plot:click', e => {
                                const { x, y } = e
                                const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                setParameter({
                                    uuid: data.superviseTypeUuid,
                                    type: 'LargeScreeTable',
                                    classification: 'SecondaryWorkingProcedure',
                                })
                                setTrue()
                            })
                        }
                    />
                )}
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="监理工序列表"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
